Begin adding support for the prefers-reduced-motion setting, Add a11y notes to the animation docs.
#14021
Conversation
…ion." This reverts commit 4503f04.
kjellr
added
[Focus] Accessibility (a11y)
kjellr
requested review from
ajitbohra,
chrisvanpatten,
gziolo,
mkaz,
oandregal,
notnownikki and
youknowriad
as code owners
|
Discussed during today's accessibility bug-scrub, definitely appreciating some exploration with |
This essentially stops all animation, but still lets us resolve on the final state.
Update: I was able expand this PR to cover this instance, along with many other animations, thanks to a trick @youknowriad shared above. Instead of setting This PR now effects the following animations:
I'd love another review, as well as thoughts on the documentation update included in this PR as well. Thanks! |
There was a problem hiding this comment.
Checked the animations out in Mac/Safari & it's working great 🙂 Left some notes on the docs, that looks good too– anything more might be too basic and not necessary, like don't use a rapid flashing animation, and don't loop animations (which is covered by the speed guidelines).
|
|
||
| @mixin reduce-motion { | ||
| @media (prefers-reduced-motion: reduce) { | ||
| animation-duration: 1ms !important; |
There was a problem hiding this comment.
I know I'm late to this merged tickets party but thought I'd mention the lack of transition-duration: 1ms !important; in this mixin.
Not sure if a transition is even used anywhere but it would make the mixin a little more versatile.
There was a problem hiding this comment.
Good call — we could try that too. I wonder if it'd make sense to create two different mixins — one for transition, and one for animation. Just so that we aren't including unused !important rules when we don't need them. I may be overthinking it though. 😄
In any case, seems worth exploring! Feel free to open up a PR.
…1y notes to the animation docs. (#14021)
…1y notes to the animation docs. (#14021)
As noted by @ryelle in #8029 (comment), the
prefers-reduced-motionmedia query is a way for websites to respect an OS-level reduce motion setting.In this PR, I've added a quick
@mixinthat we can apply as needed to opt-in to this setting. I've also begun adding it to a couple of our animations to start:Unfortunately, this can't be added to all animations (yet). For example, the menu slide-in animation moves the menu from its off-screen position into its intended position on screen. As written right now, if we remove the animation, the menu will never be moved on screen.
It also can't be used in cases where the visibility/opacity of an item is only set by the animation. For instance, I tried applying it to
edit-post__fade-in-animation, which is used in a number of places to fade in content. This worked in some cases, but a few elements (like the block mover icons) didn't appear at all when Reduce Motion was enabled.Both of those examples are totally solvable, but I wanted to keep this PR simple for now. 🙂
This PR also adds @joedolson and @ryelle's accessibility recommendations from #8029 to the animation design documentation for greater visibility.
Testing:
System Preferences > Accessibility.